
<template>
  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <table border='1'>
      <tr>
        <td>苹果 10 ￥/斤，折扣 8折 </td>
      </tr>
      <tr>
        <td>  
          请输入你要购买的斤数 <input type="text" value="0" v-model.number="jinshu">
        </td>
      </tr>
      <tr>
        <td>  
          <button @click="check">结账买单~</button>
        </td>
      </tr>
      <tr>
        <td>  
          结账单：总价：<span>{{ totalPrice }}</span>元 折后价：<span>{{ discountPrice }}</span>元 省了：<span>{{ savePrice }}</span>元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {

  data() {
    return {
      jinshu: '',
      totalPrice: 0,
      discountPrice: 0,
      savePrice: 0
    }
  },
  methods: {
    check() {
      this.totalPrice = this.jinshu * 10,
      this.discountPrice = this.jinshu * 10 * 0.8,
      this.savePrice = this.totalPrice - this.discountPrice
    }
  }
}
</script>

<style>
div {
  position: relative;
  left: 50%;
  margin-left: -320px;
}
div h4 {
  margin-left: 160px;
}
table {
  width: 600px;
  height: 100px;
  text-align: center;
}
</style>